<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.7/css/bootstrap.css">
    <script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.js"></script>
    <script type="text/javascript" src="/webjars/bootstrap/3.3.7/js/bootstrap.js"></script>
    <script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
    <script src="/webjars/axios/0.19.0/dist/axios.js" type="text/javascript"></script>
</head>
<body>
  <div id="vuebox">
   <div class="container" style="margin-top: 50px">
       <h1>图书信息</h1>
           <div class="col-md-4 text-right">
               <a @click.prevent="addBook" class="btn btn-primary">新增电子图书</a>
           </div>
       <br/>
       <table class="table table-striped">
           <thead>
           <tr>
               <th>图书名称</th>
               <th>图书作者</th>
               <th>购买时间</th>
               <th>图书分类</th>
               <th>操作</th>
           </tr>
           </thead>
           <tbody>
           <tr v-for="item in bookList">
               <td>{{item.bName}}</td>
               <td>{{item.bAuthor}}</td>
               <td>{{item.bTime}}</td>
               <td>
                   <p v-if="item.bType==1">计算机/软件</p>
                   <p v-if="item.bType==2">小说/文摘</p>
                   <p v-if="item.bType==3">杂项</p>
               </td>
               <td>
                       <button class="btn btn-danger"@click="deleteBook(item.bId)">删除</button>
               </td>
           </tr>
           <tr>
           </tr>
           </tbody>
       </table>
       <br/>
   </div>

      <!--模态框-->
      <div class="modal" id="mymodal">
          <div class="modal-dialog">
              <div class="modal-content">
                  <div class="modal-header">
                      <button @click="hideModal" class="close" type="button">&times;</button>
                      <div class="modal-title">添加图书</div>
                  </div>
                  <div class="modal-body">
                      <form class="form-horizontal" role="form">
                          <div class="form-group">
                              <label for="bName" class="col-sm-2 control-label">图书名称</label>
                              <div class="col-sm-10">
                                  <input v-model="new_Book.bName" id="bName" type="text" class="form-control" placeholder="请输入图书名称">
                              </div>
                          </div>
                          <div class="form-group">
                              <label for="bAuthor" class="col-sm-2 control-label">作者</label>
                              <div class="col-sm-10">
                                  <input v-model="new_Book.bAuthor" id="bAuthor" type="text" class="form-control" placeholder="请输入图书摘要"/>
                              </div>
                          </div>
                          <div class="form-group">
                              <label for="bTime" class="col-sm-2 control-label">购买时间</label>
                              <div class="col-sm-10">
                                  <input v-model="new_Book.bTime" id="bTime" type="text" class="form-control" placeholder="请输入上传人">
                              </div>
                          </div>
                          <div class="form-group">
                              <label for="bType" class="col-sm-2 control-label">图书分类</label>
                              <div class="col-sm-10">
                                    <select v-model="new_Book.bType"  id="bType">
                                        <option value="0">请选择图书分类</option>
                                        <option value="1">计算机/软件</option>
                                        <option value="2">小说/文摘</option>
                                        <option value="3">杂项</option>
                                    </select>
                              </div>
                          </div>
                      </form>
                  </div>
                  <div class="modal-footer">
                      <button class="btn btn-default" @click="hideModal()">关闭</button>
                          <button class="btn btn-primary" @click="saveBook">保存</button>
                  </div>
              </div>
          </div>
      </div>

  </div>




</body>
<script type="text/javascript">
        var vm=new Vue({
            el:"#vuebox",
            data:{
                bookList:{},
                delResult:{},
                new_Book:{bId:'',bName:'',bAuthor:'',bTime:'',bType:''},
            },methods:{

                select:function(){
                    axios.get("/select").then(res=>{this.bookList=res.data});
                },
                deleteBook:function (bId) {
                    axios.get("/delete",{params:{bId:bId}}).then(res=>{
                        this.delResult=res.data;
                        if(this.delResult.result=="SUCCESS"){
                            this.select();
                            alert("删除成功")
                        }else{
                            alert(this.delResult.message)
                        }
                    })
                },
            //    添加图书,显示模态框
                addBook:function () {
                   $('#mymodal').modal('show');
                },
            //    隐藏模态框
                hideModal:function () {
                    $("#mymodal").modal('hide');
                    //调用清空模态框的方法
                    this.clearForm();
                    },
            //    清空模态框内容
                clearForm:function () {
                  $("#bId").val();
                  $("#bName").val('');
                  $("#bAuthor").val('');
                  $("#bTime").val('');
                  $("#bType").val(0);
                },
                //新增图书信息
                saveBook:function () {
                    axios.post("/add",this.new_Book).then(res=>{
                        this.delResult=res.data;
                            this.select();
                        $("#mymodal").modal('hide');
                    })
                }
            },
            mounted(){
                   this.select();
            },

    })
</script>
</html>